<template>
    <div class="order-info-item">
        <div class="body row">
            <div class="info">
                <div class="title">{{ item.title }}</div>
                <div class="des">{{ item.des }}</div>
            </div>
            <div class="count">x{{ item.count }}</div>
            <div class="price-pay">￥{{ item.pricePay }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default() {
                return {
                    categoryId: "ncjz",
                    categoryName: "奶茶家族",
                    count: 2,
                    des: "冰/热饮 多重口味",
                    img:
                        "http://p1.meituan.net/wmproduct/27f7eba85cd59ba2669e4b36616fefcd77060.jpg",
                    price: "1200",
                    pricePay: 24,
                    productId: "ncjz_gmnc",
                    title: "古茗奶茶"
                };
            }
        }
    },
    data() {
        return {};
    },

    methods: {}
};
</script>


<style lang="less" scoped>
.order-info-item {
    padding: 20px 0;
    .body {
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        .info {
            flex: 1 1 auto;

            .title {
                color: #000;
                font-size: 30px;
                font-weight: 500;
                margin-bottom: 10px;
            }
        }

        .count {
            padding: 0 80px 0 50px;
            font-size: 28px;
        }

        .price-pay {
            width: 100px;
            text-align: right;
            color: #ffc031;
            font-size: 36px;
            font-weight: 700;
        }
    }
}
</style>